<template>
	<scroll-view class=" myData-content" scroll-y>
		
		<view class="myData-box">
			<h3 class="myData-title">个人资料</h3>
			<p class="j-data"><span style="float:left">人脸照片：</span><img :src="content.face" class="img" /></p>
			<p class="j-data">手机号码：{{content.mobile}}</p>
			<p class="j-data">姓名：{{content.nickName}}</p>
			<p class="j-data">性别：{{content.sexLabel}}</p>
			<p class="j-data">身份证号码：{{content.idCard}}</p>
			<view class="j-data">
				<span>身份证照片：</span>
				<view style="display: inline-block;">
					<view class="noimg">
						<img :src="content.idCardPhoto1" alt="" >
					</view>
					<view class="noimg">
						<img :src="content.idCardPhoto2" alt="" >
					</view>
				</view>
				
				
			</view>
			<p class="j-data">邮箱地址：{{content.email}}</p>
			<p class="j-data">所在区域：{{content.address}}</p>
		</view>
		<view class="myData-box">
			<h3 class="myData-title">单位信息</h3>
			<p class="j-data">纳税识别号：{{content.licenseNo}}</p>
			<p class="j-data">个人职级：{{content.personalRank}}</p>
			<p class="j-data">单位名称：{{content.companyName}}</p>
			<p class="j-data">岗位名称：{{content.jobName}}</p>
			<p class="j-data">部门名称：{{content.officeName}}</p>
		</view>
		<!-- <view class="myData-box">
			<h3 class="myData-title">兴趣爱好</h3>
			<view class="Interest">
				<view class="Interest-item" v-for="(item,index) in list" :class="item.addClass">{{item.name}}</view>
			</view>
		</view> -->
		<!-- <view class="myData-box">
			<h3 class="myData-title">个人介绍</h3>
			<p class="introduce">在很多场合我们都需要做自我介绍，参加各种聚会，来到新工作岗位，公司来了新同事等。一个好的自我介绍能够给人好的印象，能够让别人更深刻的记住你，从而带来更多的机会。今天我就来教大家怎么组织一个完整的自我介绍。</p>
		</view> -->
		<view class="edit-button" @tap="edit">修改</view>
	</scroll-view>
</template>

<script>
	
	export default {
		computed:{},
		components: {},
		data(){
			return{
				list:[
					{name:'家用电器',addClass:''},
					{name:'手机/数码',addClass:''},
					{name:'电脑/办公',addClass:''},
					{name:'运动健康',addClass:''},
					{name:'逛街购物',addClass:''},
					{addClass:'addItem'}
				],
				content:{}
				
			}
		},
		onLoad(options) {
			
		},
		onReady(){

		},
		onShow(){
			this.getData();
		},
		methods:{
			edit(){
				uni.navigateTo({
                    url:'editData',
                });
			},
			getData(){
		      let that = this;
		      this.loading = true;
		      this.$http.post("/f/userDetail")
		      .then(function (response) {
		        let data = response.data;
		        data.face = that.$url+data.face;
		        let str = "";
		        if(data.area1.areaCode!="" &&data.area1.areaCode){
		          str += data.area1.areaName;
		        }
		        if(data.area2.areaCode!="" &&data.area2.areaCode){
		          str += data.area2.areaName;
		        }
		        if(data.area3.areaCode!="" &&data.area3.areaCode){
		          str += data.area3.areaName;
		        }
		        if(data.area4.areaCode!="" &&data.area4.areaCode){
		          str += data.area4.areaName;
		        }
		          data.address = str+data.area5;
		          if(data.address=="undefined"){
		          	data.address = ""
		          }
		          data.idCard = data.property1.idCard=="undefined"?"":data.property1.idCard;
		          data.idCardPhoto1 = that.$url+data.property1.idCardPhoto1;
		          data.idCardPhoto2 = that.$url+data.property1.idCardPhoto2;
		          that.content = data;
		      })
		      .catch(function (error) {
		          // handle error
		          console.log(error);
		      })
		    },
			actionSheetTap() {
				//this.$refs.showshare.open()
				uni.showActionSheet({
					title:'确定退出当前账号',
					itemList: ['退出登录'],
					itemColor:'#F95E5A',
					success: (e) => {
						console.log(e.tapIndex);
						uni.showToast({
							title:"点击了第" + e.tapIndex + "个选项",
							icon:"none"
						})
					}
				})
			},
			change(){		

			}
		}
	}
</script>

<style lang="less">

	.myData-content{
		width:100%;
		height:100%;
		background:#f5f5f5;
		overflow:hidden;

		.img{
					width:200rpx;
					height:200rpx;
					display:inline-block;
					
					
				}
		.edit-button{
			width:670rpx;
			margin:40rpx auto;
			border-radius:50rpx;
			height:90rpx;
			line-height:90rpx;
			text-align:center;
			margin-top:80rpx;
			font-size:32rpx;
			color:#ffffff;
			background:#1783dd;
		}
		.myData-box{
			width:100%;
			padding:0 35rpx;
			margin-top:40rpx; 
			box-sizing:border-box;
			.introduce{
				line-height:40rpx;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				font-size:30rpx;
				color:#666666;
			}
			.j-data{
				line-height:60rpx;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				font-size:30rpx;
				color:#666666;
				display:inline-block;
				span{
					line-height:40rpx;
					height:40rpx;
					float:left;

				}
				.noimg{
					width:360rpx;
					height:220rpx;
					margin-right:15rpx;
						margin-top:10rpx;
					border:1px dashed #ccc;
					background:#000;
					border-radius:10rpx;
					
					text-align:center;
				}
				img{
						max-width:360rpx;
						max-height:220rpx;
						display:inline-block;
						
					}
				.img-box{
					width:100%;
					display:inline-block;

					
				}
			}
			.myData-title{
				line-height:40rpx;
				font-size:32rpx;
				color:#666666;
				font-weight:500;
				margin-bottom:20rpx;
			}
			.Interest{
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				.Interest-item{
					width:200rpx;
					height:60rpx;
					line-height:60rpx;
					text-align:center;
					border-radius:30rpx;
					font-size:28rpx;
					color:#ffffff;
					background:#0079fe;
					margin-bottom:20rpx;
				}
			}
		}

	}

</style>
